<template>
  <el-dialog :visible.sync="visible" title="基金对比详情" width="70%">
    <div>
      <el-form inline>
        <el-form-item label="总金额：">
          <el-input v-model="totalAmount" placeholder="请输入总金额" style="width: 200px;">
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 相同基金 -->
      <h3>相同基金（sameFund）</h3>
      <el-table :data="formatSameFund()" border>
        <el-table-column prop="fundCode" label="基金代码" width="120" />
        <el-table-column prop="fundName" label="基金名称" />
        <el-table-column prop="diff" label="差异(%)" />
        <el-table-column prop="amount" label="买入/卖出金额(元)" />
      </el-table>

      <!-- 多余基金 -->
      <h3 style="margin-top: 20px;">多余基金（moreFund）</h3>
      <el-table :data="formatMoreFund()" border>
        <el-table-column prop="fundCode" label="基金代码" width="120" />
        <el-table-column prop="fundName" label="基金名称" />
        <el-table-column prop="proportion" label="比例(%)" />
        <el-table-column prop="amount" label="卖出金额(元)" />
      </el-table>

      <!-- 缺少基金 -->
      <h3 style="margin-top: 20px;">缺少基金（lackFund）</h3>
      <el-table :data="formatLackFund()" border>
        <el-table-column prop="fundCode" label="基金代码" width="120" />
        <el-table-column prop="fundName" label="基金名称" />
        <el-table-column prop="proportion" label="比例(%)" />
        <el-table-column prop="amount" label="买入金额(元)" />
      </el-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "FundDiffDialog",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    data: {
      type: Object,
      default: () => ({
        sameFund: {},
        moreFund: {},
        lackFund: {}
      })
    }
  },
  data() {
    return {
      totalAmount: ""
    };
  },
  methods: {
    parsePercent(value) {
      if (!value) return 0;
      value = value.trim();
      if (value.endsWith("%")) {
        return parseFloat(value.slice(0, -1));
      } else {
        return parseFloat(value) * 100;
      }
    },
    formatSameFund() {
      if (!this.data.sameFund) return [];
      return Object.keys(this.data.sameFund).map(code => {
        const parts = this.data.sameFund[code].split(",");
        const fundName = parts[0].split("=")[1]?.trim() || "";
        const diff = parseFloat(parts[1].split("=")[1]?.replace("%", "").trim() || "0");
        const amount = this.totalAmount
          ? ((diff / 100) * this.totalAmount).toFixed(2)
          : "0.00";
        return {
          fundCode: code,
          fundName,
          diff: `${diff}%`,
          amount: -amount
        };
      });
    },
    formatMoreFund() {
      if (!this.data.moreFund) return [];
      return Object.keys(this.data.moreFund).map(code => {
        const parts = this.data.moreFund[code].split(",");
        const fundName = parts[0].split("=")[1]?.trim() || "";
        const prop = this.parsePercent(parts[1].split("=")[1]?.trim());
        const amount = this.totalAmount
          ? ((prop / 100) * this.totalAmount).toFixed(2)
          : "0.00";
        return {
          fundCode: code,
          fundName,
          proportion: `${prop}%`,
          amount: -amount
        };
      });
    },
    formatLackFund() {
      if (!this.data.lackFund) return [];
      return Object.keys(this.data.lackFund).map(code => {
        const parts = this.data.lackFund[code].split(",");
        const fundName = parts[0].split("=")[1]?.trim() || "";
        const prop = this.parsePercent(parts[1].split("=")[1]?.trim());
        const amount = this.totalAmount
          ? ((prop / 100) * this.totalAmount).toFixed(2)
          : "0.00";
        return {
          fundCode: code,
          fundName,
          proportion: `${prop}%`,
          amount
        };
      });
    }
  }
};
</script>

<style scoped>
h3 {
  margin: 15px 0 5px;
}
</style>
